<script>
//tabs里面的value 与tabs里面的index相等的话，就选中啦
export default {
    name: 'Tab',
    props: {
        index: {  // 判断是否是选中状态
            required: true,
            type: [Number, String]
        },
        label: {  // 里面的内容
            type: String,
            default: 'tab'
        }
    },
    mounted () {
        // 将自己加到在父级声明的panes里面
        this.$parent.panes.push(this)
    },
    computed: {
        active () {
            return this.$parent.value == this.index
        }
    },
    methods: {
        handleClick () {
            // 点击的时候，调用父组件的change事件，并把当前的下标传过去
           this.$parent.onChange(this.index)
        }
    },
    render (h) {
        // 声明插槽中的内容
        const tab = this.$slots.label || <span>{this.label}</span>
        // 声明一个class，表示未选中，与选中
        const classNames = {
            tab: true,
            active: this.active
        }
        return (
            <li class={classNames} on-click={this.handleClick}>{tab}</li>
        )
    },
}
</script>
<style lang="less" scoped>
    .tab {
        line-height: 40px;
        margin-right: 30px;
        position: relative;
        padding: 0 10px;
        bottom: -2px;
        cursor: pointer;
        &.active {
            border-bottom: 2px solid blueviolet ;
        }
        &:last-child {
            margin-right: 0;
        }
    }
</style>
